<template>
<div class="main">
  <div class="block">
      <div class="nav">
        <ul>
            <li :class="{native:this.$route.path == '/'}"><nuxt-link to="/">首页</nuxt-link></li>
            <li :class="{native:this.$route.path == '/equity'}"><nuxt-link to="/equity">PE</nuxt-link></li>
            <li :class="{native:this.$route.path == '/trust'}"><nuxt-link to="/trust">信托资管</nuxt-link></li>
            <li :class="{native:this.$route.path == '/fund'}"><nuxt-link to="/fund">契约基金</nuxt-link></li>
            <li class="hot" :class="{native:this.$route.path == '/research'}">
              <img src="../static/index/hot.gif" alt="">
               <nuxt-link to="/research">天沁投研</nuxt-link>
            </li>
            <li :class="{native:this.$route.path == '/advisory'}"><nuxt-link to="/advisory">热点资讯</nuxt-link></li>
            <li :class="{native:this.$route.path == '/about'}"><nuxt-link to="/about" rel="nofollow">关于我们</nuxt-link></li>                        
          </ul>
      </div>

       <div class="fixednav" v-if="isshowfixednav">
        <ul>
            <li :class="{native:this.$route.path == '/'}"><nuxt-link to="/">首页</nuxt-link></li>
            <li :class="{native:this.$route.path == '/equity'}"><nuxt-link to="/equity">PE</nuxt-link></li>
            <li :class="{native:this.$route.path == '/trust'}"><nuxt-link to="/trust">信托资管</nuxt-link></li>
            <li :class="{native:this.$route.path == '/fund'}"><nuxt-link to="/fund">契约基金</nuxt-link></li>
            <li :class="{native:this.$route.path == '/research'}">
               <nuxt-link to="/research">天沁投研</nuxt-link>  
            </li>
            <li :class="{native:this.$route.path == '/advisory'}"><nuxt-link to="/advisory">热点资讯</nuxt-link></li>
            <li :class="{native:this.$route.path == '/about'}"><nuxt-link to="/about" rel="nofollow">关于我们</nuxt-link></li>                     
          </ul>
      </div>
  </div>
    <div class="top" v-show="isshowfixednav">
        <div class="kefu" id="xxx">
            <img src="http://p6dwecco6.bkt.clouddn.com/img/Head%20portrait.png" alt="在线客服">
            <h1>在线咨询</h1>
        </div>
        <contactus4></contactus4>
       <svg class="icon" aria-hidden="true" @click="gotoTop">
        <use xlink:href="#icon-tubiao102"></use>
      </svg>
      <p>回到顶部</p>
    </div>
</div>
</template>
<script>
import contactus4 from "./contactus4";
  
export default {
  data(){
      return{
        scroll: '',
        isshowfixednav:false
      }
  },
  components:{
    contactus4
  },
  methods:{
    menu() {
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
          if(this.scroll >= 560){
            this.isshowfixednav = true
          }else{
             this.isshowfixednav = false
          }
    },
    gotoTop(){
       var scrollToptimer = setInterval(function () {
            var top = document.body.scrollTop || document.documentElement.scrollTop;
            var speed = top / 4;
            if (document.body.scrollTop!=0) {
                document.body.scrollTop -= speed;
            }else {
                document.documentElement.scrollTop -= speed;
            }
            if (top <= 30) {
                clearInterval(scrollToptimer);
            }
        }, 30); 
    }
  },
  mounted(){
    window.addEventListener('scroll', this.menu)

  } 
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hot{
  position: relative;
}
.hot img{
  position: absolute;
  left: 70px;
}
.fixednav{
  position: fixed;
  top: 0;
  z-index: 1000;
  background:rgba(255, 255, 255, .9);
  width: 100%;
  height: 60px;
  overflow: hidden;
  line-height: 60px;
  -moz-box-shadow:0 -2px 2px #ccc inset;              /* For Firefox3.6+ */
	-webkit-box-shadow:0 -2px 2px #ccc inset;           /* For Chrome5+, Safari5+ */
	box-shadow:0 -2px 2px #ccc inset;                   /* For Latest Opera */
  
}
.fixednav ul{
  display: flex;
  justify-content: space-between;
  width: 1200px;
 height: 60px;
 margin: 0 auto;
}
.main {
  background: white;
  border-top: 1px solid #cd9c54;
}
.block {
  position: relative;
}
.nav {
  width: 100%;
  height: 40px;
  line-height: 38px;
  margin: 0 auto;
  width: 1200px;
}
ul {
  width: 100%;
  margin: 10px auto;
}
li {
  display: inline-block;
  font-size: 18px;
  color: #333;
  margin-right: 40px;
  cursor: pointer;
  text-align: left;
  width: 100px;
  text-align: center;
}
li:hover {
  color: #cd9c54;
}
.native {
  color: #cd9c54;
  font-weight: 600;
  border-bottom: 1px solid #cd9c54;
}
.top{
  z-index: 9999;
  display: inline-block;
  position: fixed;
  bottom: 60px;
  right: 30px;
  font-size: 40px;
  color: #999;
  text-align: center;
}
.top .icon{
    -webkit-animation:rotateplane 3s infinite ease-in-out;
  animation:rotateplane 3s infinite ease-in-out;
  cursor: pointer;
}
.top .kefu img{
  margin-top: 6px;
}
.top .kefu{
  height: 164px;
  width: 180px;
  text-align: center;
  background: white;
}
.top .kefu h1{
  font-size: 16px;
  font-weight: bolder;
  color: #333;
  margin: 10px auto;
  text-align: center;
}
.top p{
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
}
@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform:perspective(220px);
  }
  50% {
    -webkit-transform:perspective(220px) rotateY(180deg);
  }
  100% {
    -webkit-transform:perspective(220px) rotateY(180deg);
  }
}
@keyframes rotateplane {
  0% {
    transform:perspective(120px) rotateY(0);
    -webkit-transform:perspective(220px) rotateY(0);
  }
  50% {
    transform:perspective(120px) rotateY(0);
    -webkit-transform:perspective(220px) rotateY(0);
  }
  100% {
    transform:perspective(120px) rotateY(-179.9deg);
    -webkit-transform:perspective(220px) rotateY(-179.9deg);
  }
}
</style>
